
<template>
    <div>
        <div id="pie"></div>
    </div>
  <div class="w-full flex justify-between">
    <div class="flex flex-col">
      <div class="flex flex-row gap-2 m-2">
        <ansCard title="已有动物数量" :count=count.anmimal></ansCard>
        <ansCard title="已有种类" :count=count.anmimaltype></ansCard>
        <ansCard title="已处理医疗" :count=count.medicalfinsh></ansCard>
      </div>
        <div style="display: flex;">
      <v-chart class="w-[700px] h-[600px]" :option="option" />



        </div>
    </div>

    <commit class=""> </commit>
  </div>


</template>

<script setup lang="ts">
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref } from "vue";
import axios, {request} from "axios";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);



const medicalcount =ref([])
init();
function init(){
  axios.get('http://localhost:8080/count/medical')
      .then(request =>{
        medicalcount.value = request.data;

        medicalcount.value.forEach((count, index) => {
          option.value.series[0].data[index].value = count;
        });
      })

  axios.get('http://localhost:8080/count/anmimal')
      .then(request =>{
          count.value.anmimal =  request.data
      })

  axios.get('http://localhost:8080/count/anmimaltype')
      .then(request =>{
        count.value.anmimaltype =  request.data

      })

  axios.get('http://localhost:8080/count/medicalfinsh')
      .then(request =>{
        count.value.medicalfinsh =  request.data
      })

}

const count = ref({
  anmimal:'0',
  anmimaltype:'0',
  medicalfinsh:'0',

})

const option = ref({
  title: {
    text: "动物医疗情况",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: ["待处理", "处理中", "已结束"]
  },
  series: [
    {
      name: "动物医疗情况",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: [
        { value: 1, name: "待处理" },
        { value: 2, name: "处理中" },
        { value: 3, name: "已结束" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
});


</script>


